// import { useNavigate } from "react-router-dom"
//
// const ChatHeader = () => {
//     const navigate = useNavigate()
//     return (
//         <div className="p-4 border-b flex items-center justify-between bg-gray-50">
//             <button
//                 onClick={() => navigate(-1)}
//                 className="text-sm text-blue-600 hover:underline"
//             >
//                 ← Back
//             </button>
//             <span className="text-gray-700 font-semibold text-sm">Chat Room</span>
//             <span className="w-12" />
//         </div>
//     )
// }
//
// export default ChatHeader
import {useNavigate} from "react-router-dom"

const ChatHeader = () => {
    const navigate = useNavigate()


    return (
        <header className="flex items-center justify-between p-4 border-b bg-white shadow-sm">
            <button
                onClick={() => navigate("/")}
                aria-label="Go back"
                className="
                          flex items-center justify-center
                          w-10 h-10
                          text-blue-600
                          rounded-md border
                          hover:bg-blue-100
                          transition-colors
                          focus:outline-none focus:ring-2 focus:ring-blue-400
                "
            >
                {/* 左箭头 Unicode */}
                ←
            </button>
            <h1 className="flex-1 text-center text-lg font-semibold text-gray-800 select-none">
                Chat Room
            </h1>
            {/* 占位元素保证标题居中 */}
            <div className="w-10 h-10"/>
        </header>
    )
}

export default ChatHeader
